import React, { PureComponent } from 'react';
import { Input, Button } from 'antd';
import moment from 'moment';


export default class CommentInput extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      content: '',
    }
  }

  render() {
    return (
      <div>
        <Input.TextArea
          rows={4}
          cols={30}
          name="content"
          onChange={e => this.handleChange(e)}
          value={this.state.content}
        />
        <Button type="primary" onClick={e => this.addComment()}>增加评论</Button>
      </div>
    )
  }

  handleChange(event) {
    this.setState({
      // ES6语法：计算属性名
      [event.target.name]: event.target.value
    })
  }

  addComment() { 
    const commentInfo = {
      // 时间戳
      id: moment().valueOf(),
      // 用户头像
      avatar: "https://upload.jianshu.io/users/upload_avatars/1102036/c3628b478f06.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240",
      // 用户名
      nickname: "coderwhy",
      datetime: moment(),
      content: this.state.content
    }
    this.props.submitComment(commentInfo);
    this.setState({
      content: ""
    })
  }
}
